<template>
	<div>
		<template>
			<!-- table表格 -->
			<!-- 添加按钮 -->
			<div style="margin-top:10px">
				<div class="btn-add" @click="handleAdd">
					<span>{{ $t('operation.activity_list.add1') }}</span>
				</div>
			</div>
			<el-form
				ref="tableForm"
				class="tabs-content-table"
				:model="queryData.tableForm"
			>
				<el-table
					v-loading="loading"
					element-loading-spinner="el-icon-loading"
					border
					size="mini"
					class="small-size-table"
					:data="queryData.tableForm.scRuleList"
					style="width: 100%"
					:header-cell-style="getRowClass"
					:span-method="arraySpanMethod"
					row-key="id"
					:row-style="{ height: '30px' }"
					:cell-style="{ padding: '0px' }"
				>
					<el-table-column
						type="index"
						align="center"
						:label="$t('common.serial_number')"
						min-width="50"
					></el-table-column>
					<el-table-column
						align="center"
						:label="
							$t('operation.activity_list.money').replace(
								'xx',
								currency
							)
						"
						prop="activityAmount"
						min-width="210"
					>
						<template slot-scope="scope">
							<el-form-item
								class="form-item"
								:prop="
									`scRuleList.${scope.$index}.activityAmount`
								"
								:rules="[
									{
										required: true,
										validator: getVaLiDate(
											'activityAmount',
											$t(
												'operation.activity_list.money'
											).replace('xx', currency),
											scope.$index,
											'scRuleList'
										),
										trigger: ['blur']
									}
								]"
							>
								<el-input
									v-model.trim="scope.row.activityAmount"
									size="mini"
									label=""
									:disabled="!editVisibleChlLid"
									:controls="false"
									style="width:80%"
									@change="getValidated"
								></el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column
						v-if="queryData1.giveType === 2"
						align="center"
						:label="
							$t('operation.activity_list.send').replace(
								'xx',
								currency
							)
						"
						prop="validAmount"
						min-width="180"
					>
						<template slot-scope="scope">
							<el-form-item
								:prop="`scRuleList.${scope.$index}.validAmount`"
								:rules="[
									{
										required: true,
										validator: getVaLiDate(
											'validAmount',
											$t(
												'operation.activity_list.send'
											).replace('xx', currency),
											scope.$index,
											'scRuleList'
										),
										trigger: ['blur']
									}
								]"
							>
								<el-input
									v-model.trim="scope.row.validAmount"
									size="mini"
									label=""
									:disabled="!editVisibleChlLid"
									:controls="false"
									style="width:80%"
									@change="getValidated"
								></el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column
						v-if="queryData1.giveType === 1"
						align="center"
						:label="$t('operation.activity_list.rate')"
						prop="validPresent"
						min-width="180"
					>
						<template slot-scope="scope">
							<el-form-item
								:prop="
									`scRuleList.${scope.$index}.validPresent`
								"
								:rules="[
									{
										required: true,
										validator: getVaLiDate(
											'validPresent',
											$t('operation.activity_list.rate'),
											scope.$index,
											'scRuleList'
										),
										trigger: ['blur']
									}
								]"
							>
								<el-input
									v-model.trim="scope.row.validPresent"
									size="mini"
									label=""
									:disabled="!editVisibleChlLid"
									:controls="false"
									style="width:80%"
									@change="getValidated"
								></el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column
						v-if="queryData1.giveType === 1"
						align="center"
						:label="
							$t('operation.activity_list.limit_up').replace(
								'xx',
								currency
							)
						"
						prop="validTopLimit"
						min-width="180"
					>
						<template slot-scope="scope">
							<el-form-item
								:prop="
									`scRuleList.${scope.$index}.validTopLimit`
								"
								:rules="[
									{
										required: true,
										validator: getVaLiDate(
											'validTopLimit',
											$t(
												'operation.activity_list.limit_up'
											).replace('xx', currency),
											scope.$index,
											'scRuleList'
										),
										trigger: ['blur']
									}
								]"
							>
								<el-input
									v-model.trim="scope.row.validTopLimit"
									size="mini"
									label=""
									:disabled="!editVisibleChlLid"
									:controls="false"
									style="width:80%"
									@change="getValidated"
								></el-input>
								<!-- 									onkeyup="value=value.replace(/[^\d-]*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
 -->
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						:label="$t('operation.activity_list.flow_need')"
						prop="validMultiple"
						min-width="180"
					>
						<template slot-scope="scope">
							<el-form-item
								:prop="
									`scRuleList.${scope.$index}.validMultiple`
								"
								:rules="[
									{
										required: true,
										validator: getVaLiDate12(
											'validMultiple',
											$t(
												'operation.activity_list.flow_need'
											),
											scope.$index,
											'scRuleList'
										),
										trigger: ['blur']
									}
								]"
							>
								<el-input
									v-model.trim="scope.row.validMultiple"
									size="mini"
									label=""
									:disabled="!editVisibleChlLid"
									:controls="false"
									style="width:80%"
									@change="getValidated"
								></el-input>
							</el-form-item>
						</template>
					</el-table-column>

					<!-- <el-table-column
						prop="operating"
						align="center"
						label="操作"
						width="120"
					>
						<template slot-scope="scope">
							<el-button
								type="danger"
								icon="el-icon-delete"
								size="medium"
								:disabled="!editVisibleChlLid"
								@click="handleDelete(scope.$index)"
							>
								删除
							</el-button>
							<div style="height:18px"></div>
						</template>
					</el-table-column> -->
				</el-table>
			</el-form>
		</template>
	</div>
</template>

<script>
import list from '@/mixins/list'
export default {
	mixins: [list],
	props: {
		editVisible: {
			type: Boolean,
			default: () => false
		},
		queryData1: {
			type: Object,
			default: () => {}
		},
		errorSApp: {
			type: Array,
			default: () => {
				return []
			}
		}
	},
	data() {
		return {
			isTableErr: false,
			editVisibleChlLid: false,
			queryData: {
				tableForm: {
					scRuleList: [
						{
							activityAmount: '',
							validAmount: '',
							validPresent: '',
							validTopLimit: '',
							validMultiple: ''
						}
					]
				}
			}
		}
	},
	computed: {
		currency() {
			let merchantInfo = this.$route.query.merchantInfo
			merchantInfo = merchantInfo ? JSON.parse(merchantInfo) : {}
			const currency = merchantInfo.currency || ''
			let symb = ''
			if (currency) {
				switch (currency) {
					case 'CNY':
						symb = '￥'
						break
					case 'THB':
						symb = '฿'
						break
					case 'VND':
						symb = '₫'
						break
				}
			}
			return symb
		}
	},
	watch: {
		'queryData1.giveType': {
			handler(val) {
				if (val) {
					// console.log(val, '-giveType--')
					this.$nextTick(() => {
						this.queryData.tableForm.scRuleList = []
						if (val && val === 1) {
							this.queryData.tableForm.scRuleList = [
								{
									activityAmount: '',
									validPresent: '',
									validTopLimit: '',
									validMultiple: ''
								}
							]
						} else {
							this.queryData.tableForm.scRuleList = [
								{
									activityAmount: '',
									validAmount: '',
									validMultiple: ''
								}
							]
						}
						// setTimeout(() => {
						// 	this.validate()
						// }, 500)
					})
				}
			},
			deep: true,
			immediate: true
		},
		// 规则配置的圆点检测
		'queryData.tableForm.scRuleList': {
			handler(err) {
				if (err) {
					// this.$emit('appropriation')
				}
			},
			deep: true,
			immediate: true
		},
		editVisible: {
			handler(val) {
				this.$nextTick(() => {
					this.editVisibleChlLid = val
				})
			},
			deep: true,
			immediate: true
		}
	},
	methods: {
		getValidated() {
			if (
				this.errorSApp.length > 0 &&
				this.errorSApp.filter((val) => val).length > 0
			) {
				this.$emit('appropriation', true)
			} else {
				this.$emit('appropriation', false)
			}
		},
		getSpan(list) {
			const newArr = []
			const obj = {}
			if (list.length > 1) {
				for (let i = 0; i < list?.length; i++) {
					if (i === 0) {
						obj.row = 1
						obj.col = 1
						newArr.push(obj)
					} else {
						if (list[i].id === list[i - 1].id) {
							newArr.push({ row: 0, col: 0 })
							list.findIndex((item, index1) => {
								return item.id === list[i - 1].id
							})
							newArr[0].row++
						} else {
							newArr.push({ row: 1, col: 1 })
						}
					}
				}
			}
			return newArr
		},

		arraySpanMethod({ column, rowIndex, columnIndex }) {
			if (this.queryData.tableForm.scRuleList.length <= 1) return
			const arr = this.getSpan(this.queryData.tableForm.scRuleList)

			const row = arr[rowIndex].row
			const col = arr[rowIndex].col
			if (column.label === '流水（倍）') {
				this.queryData.tableForm.scRuleList
				return {
					rowspan: row,
					colspan: col
				}
			}
		},

		// 随时校验
		validate() {
			this.$refs['tableForm'].validate((valid) => {
				if (valid) {
					return valid
				}
			})
		},
		// 删除单行
		handleDelete(index) {
			if (this.queryData.tableForm.scRuleList.length > 1) {
				this.queryData.tableForm.scRuleList.splice(index, 1)
			} else {
				return this.$message({
					message: this.$t('operation.activity_list.need'),
					type: 'warning'
				})
			}
		},
		// 添加
		handleAdd() {
			if (!this.editVisibleChlLid) return
			const template = {
				activityAmount: undefined,
				validAmount: undefined,
				validMultiple: undefined
			}
			this.queryData.tableForm.scRuleList.push(template)

			// this.$nextTick(() => {
			// 	setTimeout(() => {
			// 		this.validate()
			// 	}, 500)
			// })
		},
		// cell 校验
		getVaLiDate(field, fieldName, index, typeName, submit = false) {
			return (rule, value, callback) => {
				// console.log(value, 'value')
				const reg = /^(([0-9]+)|([0-9]+\.[0-9]{0,2}))$/
				// console.log(reg.test(value), '=+++')
				this.$nextTick(() => {
					if (!value) {
						callback(new Error(this.$t('common.please_enter')))
						this.isTableErr = true
						this.errorSApp.push(true)
					} else if (value && +value === 0) {
						callback(
							new Error(
								this.$t('operation.activity_list.no_zero')
							)
						)
						this.errorSApp.push(true)
					} else if (!reg.test(value) && value) {
						callback(
							new Error(this.$t('operation.activity_list.dot'))
						)
						this.isTableErr = true
						this.errorSApp.push(true)
					} else {
						// errorSApp.push(false)
						callback()
					}
					this.getValidated()
				})
			}
		},
		getVaLiDate12(field, fieldName, index, typeName, submit = false) {
			return (rule, value, callback) => {
				// console.log(value, 'value')
				const reg = /^(([0-9]+))$/
				// console.log(reg.test(value), '=+++')
				this.$nextTick(() => {
					if (!value) {
						callback(new Error(this.$t('common.please_enter')))
						this.isTableErr = true
						this.errorSApp.push(true)
					} else if (!reg.test(value) && value) {
						callback(
							new Error(
								this.$t('operation.activity_list.integer')
							)
						)
						this.isTableErr = true
						this.errorSApp.push(true)
					} else {
						// errorSApp.push(false)
						callback()
					}
					this.getValidated()
				})
			}
		},

		// 删除table cell
		deleteRow() {}
	}
}
</script>

<style lang="scss" scoped>
.btn-add {
	width: 60px;
	height: 25px;
	line-height: 25px;
	span {
		display: flex;
		justify-content: center;
		background: #00a7f0;
		align-items: center;
		color: #ffff;
		font-size: 14px;
		cursor: pointer;
	}
}
.form-item ::v-deep .el-form-item__content {
	height: 30px;
	line-height: 30px;
}
//input-number 位置
::v-deep .el-form-item__content .el-input-group {
	vertical-align: baseline;
}
</style>
